<template>
	<view class="gradens-yhrw-index">
		<view class="uni-padding-wrap">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="gradens-yhrw-card" v-if="current === 0">
			<uni-card v-for='item in queryWeekList' :key='item.id' v-if="item.auditStatus === '1'">
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">计划名称:</view>
					<text class="yhrw-list-text">{{item.planName}}</text>
				</view>
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">计划类型:</view>
					<text class="yhrw-list-text">{{item.type}}</text>
				</view>
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">起止时间:</view>
					<text class="yhrw-list-text">{{item.startTime | date('yyyy-mm-dd')}} ~ {{item.endTime | date('yyyy-mm-dd')}}</text>
				</view>
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">养护单位:</view>
					<text class="yhrw-list-text">{{item.unit}}</text>
				</view>
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">任务状态:</view>
					<text class="yhrw-list-text">{{item.status}}</text>
				</view>
				<view style="display: flex;margin-top: 20rpx;">
					<view style="width: 125rpx;">养护日志:</view>
					<view style="display: flex;flex-wrap: wrap;">
						<view class="" style="margin-left: 10rpx;" v-for='item2 in item.dayPlay' :key='item2.id'>
							<uni-tag :type="item2.status === '1'?'warning':''" :text="item2.maintainTime" />
						</view>
					</view>
				</view>
				<view class="" style="display: flex;margin-top: 40rpx;">
					<button style="width: 200rpx;height: 80rpx;" @click="view(item.id)">查看</button>
					<button v-show="item.schedule != 100 &&
					statusTimeFn(item.startTime, item.endTime)" style="width: 200rpx;height: 80rpx;"
						@click="update(item.id)">填报</button>
				</view>
			</uni-card>
		</view>
		<view class="gradens-yhrw-card" v-if="current === 1">
			<uni-card v-for='item in maintainSpecialPlanList' :key='item.id'>
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">计划名称:</view>
					<text class="yhrw-list-text">{{item.planName}}</text>
				</view>
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">起止时间:</view>
					<text class="yhrw-list-text">{{item.startTime | date('yyyy-mm-dd')}} ~ {{item.endTime | date('yyyy-mm-dd')}}</text>
				</view>
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">养护单位:</view>
					<text class="yhrw-list-text">{{item.unit}}</text>
				</view>
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">专项内容:</view>
					<text class="yhrw-list-text"><dict-tag :options="dicts.relevance_type_name"
							:value="item.relevanceTypeName" /></text>
				</view>
				<view class="yhrw-list-item">
					<view class="yhrw-list-name">任务状态:</view>
					<text
						class="yhrw-list-text">{{item.remark?item.remark:parseTimeType(item.startTime,item.endTime)}}</text>
				</view>
				<view class="" style="display: flex;margin-top: 40rpx;">
					<button style="width: 200rpx;height: 80rpx;" @click="view(item.id)">查看</button>
					<button v-show="parseTimeType(item.startTime,item.endTime) ==='已开始' && !item.remark"
						:style="{width: '200rpx',height: '80rpx',}" @click="update(item.id)">填报</button>
				</view>
			</uni-card>
		</view>
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
	</view>
</template>

<script>
	import {
		listMaintainDiary
	} from '@/api/comp/maintainDiary'
	import {
		listQueryWeekList
	} from '@/api/comp/maintainWeekPlan'
	import {
		listMaintainSpecialPlan
	} from '@/api/comp/maintainSpecialPlan'
	import dictTag from "@/components/dict-tag"
	export default {
		dicts: ['relevance_type_name'],
		components: {
			dictTag
		},
		data() {
			return {
				current: 0,
				items: ['日常养护任务', '专项养护任务'],
				is_active: 'richang',
				activeColor: 'rgb(35, 89, 193)',
				styleType: 'button',
				is_active: 'richang',
				date: new Date(),
				queryWeekList: [],
				maintainSpecialPlanList: [],
				planStatus: true,
				status: 'noMore',
				reload: false,
				queryParams: {},
				page: 1,
				size: 10,
				total: 0,
				total2:0,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			}
		},
		onLoad() {
			this.page = 1;
			this.reload = true;
			this.getList()
		},
		onReachBottom() {
			this.page++;
			if (this.current == 0) {
				if (this.queryWeekList.length < this.total) {
					this.status = 'more';
				} else {
					this.status = 'noMore';
					return;
				}
				this.getList();
			} else {
				if (this.maintainSpecialPlanList.length < this.total2) {
					this.status = 'more';
				} else {
					this.status = 'noMore';
					return;
				}
				this.getMaintainSpecialPlan();
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.maintainSpecialPlanList = [];
					this.queryWeekList = [];
					this.page = 1;
					this.reload = true;
					if (this.current == 0) {
						this.getList();
					} else {
						this.getMaintainSpecialPlan();
					}
				}
			},
			getMaintainSpecialPlan() {
				uni.showLoading({
					title: "加载中"
				})
				if (this.total2 && !this.reload) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
				}
				if (this.reload) {
					uni.stopPullDownRefresh();
				}
				this.queryParams.pageSize = this.size;
				this.queryParams.pageNum = this.page;
				listMaintainSpecialPlan(this.queryParams).then(res => {
					uni.hideLoading();
					if (res.rows) {
						this.total2 = res.total;
						this.maintainSpecialPlanList = this.reload ? res.rows : this.maintainSpecialPlanList.concat(res.rows);
						this.reload = false;
					}
				})
			},
			getList() {
				uni.showLoading({
					title: "加载中"
				})
				if (this.total && !this.reload) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
				}
				if (this.reload) {
					uni.stopPullDownRefresh();
				}
				this.queryParams.pageSize = this.size;
				this.queryParams.pageNum = this.page;
				listQueryWeekList(this.queryParams).then(res => {
					uni.hideLoading();
					if (res.rows) {
						this.total = res.total;
						this.queryWeekList = this.reload ? res.rows : this.queryWeekList.concat(res.rows);
						this.queryWeekList.map(async item => {
							let startTime = new Date(item.startTime)
							let endTime = new Date(item.endTime)
							let res2 = await listMaintainDiary({
								weekId: item.id
							})
							let dayPlay = res2.rows.sort((a, b) => {
								const dateA = new Date(a.maintainTime).getTime();
								const dateB = new Date(b.maintainTime).getTime();
								a.maintainTime = new Date(a.maintainTime).getMonth() + 1 +
									'-' + new Date(a.maintainTime).getDate()
								b.maintainTime = new Date(b.maintainTime).getMonth() + 1 +
									'-' + new Date(b.maintainTime).getDate()
								return dateA - dateB;
							})
							this.$set(item, 'dayPlay', dayPlay)
							if (this.date.getTime() < startTime.getTime()) {
								this.$set(item, 'status', '未开始')
							} else if (this.date.getTime() > startTime.getTime() && this.date
								.getTime() < endTime.getTime() && item.schedule !== '100') {
								this.$set(item, 'status', '养护中')
							} else if (this.date.getTime() > endTime.getTime() && item.schedule !==
								'100') {
								this.$set(item, 'status', '已结束')
							} else if (item.schedule == '100') {
								this.$set(item, 'status', '已完成')
							}
						})
						this.reload = false;
					}
				})
			},
			// 日常养护任务查看填报判断
			statusTimeFn(startTime, endTime) {
				const currentDate = new Date(endTime);
				currentDate.setHours(23, 59, 59, 0);
				const timestamp = currentDate.getTime();
				const currentTime = new Date().getTime();
				if (startTime) {
					return (
						currentTime < timestamp &&
						currentTime >= new Date(startTime).getTime()
					);
				} else {
					return currentTime < timestamp;
				}
			},
			// 专项养护任务
			parseTimeType(startDateTime, endDateTime) {
				let startTime = new Date(startDateTime).getTime();
				let endTime = new Date(endDateTime).getTime();
				let todayTime = new Date().getTime();
				if (startTime > todayTime) {
					this.planStatus = false
					return "未开始";
				} else if (
					startTime <= todayTime &&
					startTime <= endTime &&
					todayTime <= endTime
				) {
					this.planStatus = true
					return "已开始";
				} else if (todayTime > endTime) {
					this.planStatus = false
					return "已结束";
				}
			},
			view(id) {
				if (this.current === 0) {
					uni.navigateTo({
						url: '/pages/gardens/yhrw/view?id=' + id
					})
				}
				if (this.current === 1) {
					uni.navigateTo({
						url: '/pages/gardens/yhrw/zxview?id=' + id
					})
				}
			},
			update(id) {
				if (this.current === 0) {
					uni.navigateTo({
						url: '/pages/gardens/yhrw/update?id=' + id
					})
				}
				if (this.current === 1) {
					uni.navigateTo({
						url: '/pages/gardens/yhrw/zxupdate?id=' + id
					})
				}
			},
			backClick() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	$nav-height: 30px;

	.uni-padding-wrap {
		padding: 0px 10px;
	}

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.gradens-yhrw-index {
		.gradens-yhrw-btn {
			display: flex;

			button {
				width: 50%;
			}

			.is_active {
				background-color: #0055ff;
				color: #F5F5F5;
			}

			.no_active {
				background-color: #F5F5F5;
				color: #000;
			}
		}

		.gradens-yhrw-card {
			.yhrw-list-item {
				display: flex;
				margin-bottom: 10rpx;
				.yhrw-list-name {
					width: 125rpx;
				}

				.yhrw-list-text {
					flex: 1;

				}
			}
		}
	}
</style>